<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="操作时间">
        <el-date-picker
          v-model="currentTime"
          type="datetimerange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-card style="height: 100%;">
      <el-row>
        <el-col :span="8" style="display: flex; flex-direction: column; justify-content: center; height: 100%;">
          <el-empty v-if="list.length === 0" description="当前时间段暂时没有数据"></el-empty>
          <div v-else
               style="display: flex;flex-direction: column; justify-content: center; align-items: center;text-align: center">
            <button style="width: 100%;margin-top: 13px" class="button" v-for="item in list"
                    @click="showImage(item.currentName)">
              {{ parseDate(item.currentName) + '预测结果' }}
            </button>
          </div>
        </el-col>
        <el-col :span="16" style="padding:0 13px">
          <el-carousel autoplay arrow="always">
            <el-carousel-item v-for="(image, index) in images" :key="index">
              <el-image :src="image" alt="轮播图" fit="fill">
                <div slot="error">
                  <el-image :src="require('@/assets/404_images/404.png')"
                            style="height: 100%; width: auto; max-width: 100%;"></el-image>
                </div>
              </el-image>
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
    </el-card>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import {getHistory} from "@/api/system/history";
import moment from 'moment'

export default {
  name: "History",
  data() {
    return {
      multiple: true,
      total: 0,
      loading: true,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        starTime: null,
        endTime: null
      },
      list: [],
      images: [this.$config.historyPath + "/oneHour.png", this.$config.historyPath + "/twoHour.png"],
      showSearch: true,
      filePrefix: this.$config.historyPath,//存放的目录前缀
      currentTime: [],
    }
  },
  created() {
    this.getList();
  },
  methods: {
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.currentTime = [];
      this.resetForm("queryForm");
      this.queryParams.pageNum = 1;
      // this.$refs.tables.sort(this.defaultSort.prop, this.defaultSort.order)
    },
    showImage(currentName) {
      this.images = [this.filePrefix + currentName + "/oneHour.png", this.filePrefix + currentName + "/twoHour.png"]
    },
    parseDate(timestamp) {
      const dateTime = moment(timestamp, 'YYYYMMDDHHmm');
// 格式化为可读的时间字符串
      const formattedDateTime = dateTime.format('YYYY-MM-DD HH:mm');
      return formattedDateTime
    },
    getList() {
      this.loading = true;
      this.queryParams.starTime = this.currentTime[0] ? moment(this.currentTime[0]).format('YYYYMMDDHHmm') : null
      this.queryParams.endTime = this.currentTime[1] ? moment(this.currentTime[1]).format('YYYYMMDDHHmm') : null
      getHistory(this.queryParams).then(response => {
          this.list = response.data.records;
          this.total = response.data.total;
          this.loading = false;
        }
      );
    },
  }
}
</script>

<style scoped>
.button {
  padding: 1em 2em;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  letter-spacing: 5px;
  text-transform: uppercase;
  cursor: pointer;
  color: #2c9caf;
  transition: all 1000ms;
  font-size: 15px;
  position: relative;
  overflow: hidden;
  outline: 2px solid #2c9caf;
}

button:hover {
  color: #ffffff;
  transform: scale(1.1);
  outline: 2px solid #70bdca;
  box-shadow: 4px 5px 17px -4px #268391;
}

button::before {
  content: "";
  position: absolute;
  left: -50px;
  top: 0;
  width: 0;
  height: 100%;
  background-color: #2c9caf;
  transform: skewX(45deg);
  z-index: -1;
  transition: width 1000ms;
}

button:hover::before {
  width: 250%;
}

/deep/ .el-carousel__container {
  height: 600px
}

.el-carousel__item {
  background-color: #d3dce6;
}
</style>
